﻿@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "";
}

@section Scripts{
<script type="text/javascript">
     var data = {
        text: 'Groceries',
        items: [{
            text: 'Drinks',            
            items: [{
                text: 'Water',
                items: [{
                    text: 'Sparkling',
                    leaf: true
                }, {
                    text: 'Still',
                    leaf: true
                }]
            }, {
                text: 'Coffee',
                leaf: true
            }, {
                text: 'Espresso',
                leaf: true
            }, {
                text: 'Redbull',
                leaf: true
            }, {
                text: 'Coke',
                leaf: true
            }, {
                text: 'Diet Coke',
                leaf: true
            }]
        }, {
            text: 'Fruit',
            items: [{
                text: 'Bananas',
                leaf: true
            }, {
                text: 'Lemon',
                leaf: true
            }]
        }, {
            text: 'Snacks',
            items: [{
                text: 'Nuts',
                leaf: true
            }, {
                text: 'Pretzels',
                leaf: true
            }, {
                text: 'Wasabi Peas',
                leaf: true
            }]
        }]
    };
    Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    xtype: 'nestedlist',
                    title: 'Blog',
                    iconCls: 'star',
                    displayField: 'text',

                    store: {
                        type: 'tree',
                        fields: [
                            'text'                       
                        ],        
                        defaultRootProperty: 'items',                   
                        root: data                        
                    },

                    detailCard: {
                        xtype: 'panel',
                        scrollable: true,
                        styleHtmlContent: true
                    },

                    listeners: {
                        itemtap: function(nestedList, list, index, element) {
                            this.getDetailCard().setHtml('fsdf');
                        }
                    }
                }
            ]
        });
    }
});
</script>
}